<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="test">
			<input type="text"  v-model:value="x" />
			<select v-model="opt">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="text" v-model:value="y"/>
			<input type="button"  @click="cal"  value="="/>
			<input type="text" v-model="sum" />
		<!--
			v-bind与v-model区别
			1、v-bind只能单项数据绑定，v-model可以双向数据绑定
			2、v-bind可以绑定html元素任意属性，v-model只能默认绑定value
			3、v-bind绑定的是js语句，v-model只能绑定data重的数据值
		-->
		
		</div>
		<script>
			var vue = new Vue({
				el:'#test',
				data:{
					x:0,
					y:0,
					opt:"+",
					sum:0,
				},
				methods:{
					cal(){
					// 根据设置的计算方法进行计算
						switch (this.opt) {
					
							case "+": // 加法
								this.sum = parseFloat(this.x) + parseFloat(this.y);
					            break;
					
							case "-": // 减法
								this.sum = parseFloat(this.x) - parseFloat(this.y);
								break;
					
							case "*": // 乘法
								this.sum = parseFloat(this.x) * parseFloat(this.y);
								break;
					
							case "/": // 除法
								this.sum = parseFloat(this.x) / parseFloat(this.y);
								break;
						}
					}
				}
			})
		</script>
	</body>
</html>
